<template>
	<view class="content">
		<map style="width: 750rpx; height: 100vh;" :layer-style='1' :show-location='true'
			:latitude="latitude" :longitude="longitude" :markers="marker" @markertap="markertap"
			@callouttap='callouttap'
			enable-zoom = "true"
			:scale="scale"
			>

		</map>
		<uni-popup ref="popup" :mask-click="true" style="margin-bottom: 40rpx; height: 300rpx;" @maskClick="maskCli()">
			<view class="bottom-context">
				<view style="display: flex; margin: 0 auto; margin-top: 40rpx; width: 90%; border-bottom: #f1f1f1f1 solid 2rpx;">
					<view style="margin-left: 0rpx; margin-right: 40rpx; margin-top: 24rpx;">
						<image :src="showScInfo.scImage"  style="width: 260rpx; height: 220rpx; border-radius: 10rpx;"></image>
					</view>
					<view style="margin-top: 24rpx; padding-bottom: 20rpx;" @click="toTicket()">
						<view>
							<text style="font-size: 34rpx;font-weight: 700;">
								{{showScInfo.scName}}
							</text>
						</view>
						<view style="margin-top: 24rpx; margin-bottom: 24rpx;">
							<text style="font-size: 28rpx;">简介：{{showScInfo.scDesc}}</text>
						</view>
					</view>
				</view>
				<view style="display:flex; width: 90%; margin: 0 auto; justify-content: space-between;color: gray;">
					<view style="width:48%;border-right: #e7e7e7f1 solid 3rpx; display: flex;" @click="toGuide()">
						<view><uni-icons type="paperplane" size="30" ></uni-icons></view>
						<view  style="width: 80%;margin-top: 10rpx; margin-left: 10rpx;"><text style="text-align: center;">立即前往</text></view>
						
						
					</view>
					
					<view style="width:47%;
					display: flex;" @click="playMusic()">
						<view><uni-icons type="headphones" size="30" ></uni-icons></view>
						<view style="width: 80%;margin-top: 10rpx; margin-left: 10rpx;"><text >语音讲解</text></view>
						
						
					</view>
				</view>
				
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	innerAudioContext.src = '../../static/ttsmaker-file-2023-12-18-14-12-23.mp3'
	
	
	
	
	innerAudioContext.onError((res) => {
	  console.log(res.errMsg);
	  console.log(res.errCode);
	});
	//115.998981,39.881046
	//29.04812,110.487606
	export default {
		data() {
			return {
				innerAudioContext:null,
				latitude: 29.045664, //纬度
				longitude: 110.483699, //经度
				scale: 15, //缩放级
				showScInfo:{
					
						scId:4,
						scName:'天门洞',
						scDesc:'宛若一道通天的门户',
						scTime:"08:00-17:00",
						scImage:'https://gzz-project-file.oss-cn-guangzhou.aliyuncs.com/view/6a417fa8-3fdb-4b92-b028-1a31bc640d2b.png',
						scPrice:100
					
				},
				marker: [{
						id: 4,
						latitude: 29.0477, //纬度
						longitude: 110.487606, //经度
						iconPath: '../../static/icon/scenery-map.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 20, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						
					},
					
					
					
				],
			}
		},
		onLoad() {
			innerAudioContext.stop()
		},
		onUnload(){
			innerAudioContext.stop()
		},
		computed: {
			
		},
		methods: {
			//地图点击事件
			markertap(e) {
				this.$refs.popup.open('bottom')
				console.log("===你点击了标记点===", e)
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			},
			
			close() {
					this.$refs.popup.close()
			},
			toTicket(){
				uni.navigateTo({
					url:"/pages/ticket/ticket?scid="+this.showScInfo.scId
				})
			},
			maskCli(){
				console.log("关闭了")
				innerAudioContext.stop()
			},
			playMusic(){
				innerAudioContext.play()
			}
		}
	}
</script>
<style>
.bottom-context {
	width: 100vw;
	height: 34vh;
	background-color: #fff;
	border-top-right-radius: 16rpx;
	border-top-left-radius: 16rpx;
	
}
	
</style>